<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/bootstrap/js/jquery.js"></script>
    <style>
        #d1{
           /* border: 1px solid red;*/
            height: 300px;
            width: 100%;
            display: flex;
            flex-direction:row;
            align-items:flex-end;
            justify-content:center;
        }
        #d11{
            background:rgba(0,0,0,0.5);
            border-radius: 20px;
            font-size: 20px;
            color: white;
            height: 200px;
            width: 1000px;
        }
        #d2{
            /*border: 1px solid red;*/
            margin: 20px;
            height: 300px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content:center;
        }
        #d21{
           /* border: 1px solid red;*/
            margin: 20px;
            box-shadow: blue;
            border-radius: 10%;
            background:rgba(0,0,0,0.5);
            height: 250px;
            width: 200px;
        }
        #d22{
            margin: 20px;
            border-radius: 10%;
          /*  border: 1px solid red;*/
            background:rgba(0,0,0,0.5);
            height: 250px;
            width: 200px;
        }
        #d23{
            margin: 20px;
            border-radius: 10%;
           /* border: 1px solid red;*/
            background:rgba(0,0,0,0.5);
            height: 250px;
            width: 200px;
        }
        #d24{
            border-radius: 10%;
            margin: 20px;
           /* border: 1px solid red;*/
            background:rgba(0,0,0,0.5);
            height: 250px;
            width: 200px;
         }
        #d25{
            border-radius: 10%;
            margin: 20px;
           /* border: 1px solid red;*/
            background:rgba(0,0,0,0.5);
            height: 250px;
            width: 200px;
        }
        body{
            background-image: url("/img/2.jpg");
        }
        li{
            list-style-type: none;
        }
        #d2 div{
            width: 200px;
            height: 250px;
            background-repeat: no-repeat;
            background-size: 200px 250px;
        }
    </style>
</head>
<body >
<div class="block clearfix">

    <div class="userCenterBox boxCenterList clearfix" style="_height:1%;">
        <table width="100%" align="center" border="0" cellpadding="5"
               cellspacing="1" bgcolor="#dddddd">
            <tr>
                <td bgcolor="#ffffff" align="right" width="120px">区域信息：</td>
                <td bgcolor="#ffffff">
                    <!-- 省 -->
                    <select id="province"name="province" onchange="changeCity()">
                        <option value="">-- 请选择省 --</option>
                    </select>&nbsp;&nbsp;&nbsp;
                    <!-- 市 -->
                    <select id="city" name="city" onchange="changeDistrict()">
                        <option value="">-- 请选择市 --</option>
                    </select>&nbsp;&nbsp;&nbsp;
                    <!-- 县(区) -->
                    <select id="district" name="district" onchange="changeDhiddenValue()">
                        <option value="">-- 请选择县(区) --</option>
                    </select>
                    <!-- 添加隐藏域，用来提交给后台省市区对应的中文名 -->
                    <input type="hidden" name="phidden" id="phidden">
                    <input type="hidden" name="chidden" id="chidden">
                    <input type="hidden" name="dhidden" id="dhidden">

                </td>
            </tr>

        </table>

    </div>

</div>
<div id ="d1">
    <div>
        <div id="d11">
            <table>
                <tr>
                    <td id="td1"></td>
                    <td id="td2"></td>
                    <td id="td3"></td>

                </tr>
                <tr>
                    <td id="td5"></td>
                </tr>
                <tr>
                    <td id="td6"></td>
                    <td id="td7"></td>
                </tr>
                <tr id="tr1"></tr>
            </table>
        </div>
    </div>
</div>
<div id="d2">
    <div id="d21">
        <table>
           <ul id="u11">
               
           </ul>
        </table>
    </div>
    <div id="d22">
        <table>
            <ul id="ul2">

            </ul>
        </table>
    </div>
    <div id="d23">
        <table>
            <ul id="ul3">

            </ul>
        </table>
    </div>
    <div id="d24">
        <table>
            <ul id="ul4">

            </ul>
        </table>
    </div>
    <div id="d25">
        <table>
            <ul id="ul5">

            </ul>
        </table>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $.ajax({
            type:"POST",
            url:"provinces",
            dataType:"json",
            success:function(result){
                for(var i=0;i<result.data.length;i++){
                    var ajax = result.data[i];
                    var $option = $("<option value='"+ajax.provinceZh+"'>"+ajax.provinceZh+"</option>");
                    $("#province").append($option);
                }
            }
        });
    });

    function changeCity(){
        //当省的内容发生变化的时候，响应的改变省的隐藏域的值
        $("#phidden").val($("#province option:selected").html());
        //页面加载完成，将省的信息加载完成
        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        var pid = $("#province").val();
        $.ajax({
            url:"leaders",
            data:{"provinceZh":pid},
            dataType:"json",
            success:function(result){
                //清空城市下拉列表框的内容
                $("#city").html("<option value=''>-- 请选择市 --</option>");
                $("#district").html("<option value=''>-- 请选择区/县 --</option>");
                //遍历json，json数组中每一个json，都对应一个省的信息，都应该在省的下拉列表框下面添加一个<option>
                for(var i=0;i<result.data.length;i++){
                    var ajax = result.data[i];
                    var $option = $("<option value='"+ajax.leaderZh+"'>"+ajax.leaderZh+"</option>");
                    $("#city").append($option);
                }
            }
        });
    }

    function changeDistrict(){
        //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
        $("#chidden").val($("#city option:selected").html());
        //页面加载完成，将省的信息加载完成
        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        var pid = $("#city").val();
        $.ajax({
            url:"citys",
            data:{"leaderZh":pid},
            dataType:"json",
            success:function(result){
                //清空城市下拉列表框的内容
                $("#district").html("<option value=''>-- 请选择区/县 --</option>");
                for(var i=0;i<result.data.length;i++){
                    var ajax = result.data[i];
                    var $option = $("<option value='"+ajax.id+"'>"+ajax.cityZh+"</option>");
                    $("#district").append($option);
                }
            }
        });
    }

    function changeDhiddenValue(){
        //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
        $("#dhidden").val($("#district option:selected").html());
        var cityId = $("#district").val();

        $.ajax({
            type:"get",
            url:"cityWeather",
            data:{"cityId":cityId},
            success:function (weather) {
                $("#u11").html("<li></li>");
                $("#ul2").html("<li></li>");
                $("#ul3").html("<li></li>");
                $("#ul4").html("<li></li>");
                $("#ul5").html("<li></li>");
                var $li1= $("<li ></li>").text("日期："+weather.data.forecast[0].date);
                var $li11= $("<li ></li>").text("天气："+weather.data.forecast[0].type);
                var $li111= $("<li ></li>").text("高温："+weather.data.forecast[0].high);
                var $li1111= $("<li ></li>").text("低温："+weather.data.forecast[0].low);
                var $li11111= $("<li ></li>").text("风向："+weather.data.forecast[0].fengxiang);
                var xx=weather.data.forecast[0].fengli;
                var y=xx.split("[")[2].split("]")[0];
                var $li111111= $("<li ></li>").text("风力："+y);
                $("#d21").css({
                    background:"url(/img/"+weather.data.forecast[0].type+".jpg)"
                })
                $("#td1").text("城市："+weather.data.city);
                $("#td2").text(weather.data.forecast[0].date+"|");
                $("#td3").text(weather.data.forecast[0].type);

                $("#td5").text("温度："+weather.data.wendu+"℃");
                $("#td6").text("风力："+y);
                $("#td7").text("风向："+weather.data.forecast[0].fengxiang);
                $("#tr1").text("温馨提示："+weather.data.ganmao);

                $("#u11").append($li1);
                $("#u11").append($li11);
                $("#u11").append($li111);
                $("#u11").append($li1111);
                $("#u11").append($li11111);
                $("#u11").append($li111111);

                var $li2 = $("<li ></li>").text("日期："+weather.data.forecast[1].date);
                var $li22 = $("<li ></li>").text("天气："+weather.data.forecast[1].type);
                var $li222 = $("<li ></li>").text("高温："+weather.data.forecast[1].high);
                var $li2222 = $("<li ></li>").text("低温："+weather.data.forecast[1].low);
                var $li22222 = $("<li ></li>").text("风向："+weather.data.forecast[1].fengxiang);
                xx=weather.data.forecast[1].fengli;
                 y=xx.split("[")[2].split("]")[0];
                var $li222222 = $("<li ></li>").text("风力："+y);

                $("#d22").css({
                    background:"url(/img/"+weather.data.forecast[1].type+".jpg)"
                })
                $("#ul2").append($li2);
                $("#ul2").append($li22);
                $("#ul2").append($li222);
                $("#ul2").append($li2222);
                $("#ul2").append($li22222);
                $("#ul2").append($li222222);



                var $li3= $("<li ></li>").text("日期："+weather.data.forecast[2].date);
                var $li33= $("<li ></li>").text("天气："+weather.data.forecast[2].type);
                var $li333= $("<li ></li>").text("高温："+weather.data.forecast[2].high);
                var $li3333= $("<li ></li>").text("低温："+weather.data.forecast[2].low);
                var $li33333= $("<li ></li>").text("风向："+weather.data.forecast[2].fengxiang);
                xx=weather.data.forecast[2].fengli;
                y=xx.split("[")[2].split("]")[0];
                var $li333333= $("<li ></li>").text("风力："+y);
                $("#d23").css({
                    background:"url(/img/"+weather.data.forecast[2].type+".jpg)"
                })
                $("#ul3").append($li3);
                $("#ul3").append($li33);
                $("#ul3").append($li333);
                $("#ul3").append($li3333);
                $("#ul3").append($li33333);
                $("#ul3").append($li333333);


                var $li4= $("<li ></li>").text("日期："+weather.data.forecast[3].date);
                $("#ul4").append($li4);
                $li4= $("<li ></li>").text("天气："+weather.data.forecast[3].type);
                $("#ul4").append($li4);
                 $li4= $("<li ></li>").text("高温："+weather.data.forecast[3].high);
                $("#ul4").append($li4);
                 $li4= $("<li ></li>").text("低温："+weather.data.forecast[3].low);
                $("#ul4").append($li4);
                 $li4= $("<li ></li>").text("风向："+weather.data.forecast[3].fengxiang);
                $("#ul4").append($li4);
                xx=weather.data.forecast[3].fengli;
                y=xx.split("[")[2].split("]")[0];
                 $li4= $("<li ></li>").text("风力："+y);
                $("#ul4").append($li4);
                $("#d24").css({
                    background:"url(/img/"+weather.data.forecast[3].type+".jpg)"
                })


                var $li5= $("<li ></li>").text("日期："+weather.data.forecast[4].date);
                $("#ul5").append($li5);
                $li5= $("<li ></li>").text("天气："+weather.data.forecast[4].type);
                $("#ul5").append($li5);
                $li5= $("<li ></li>").text("高温："+weather.data.forecast[4].high);
                $("#ul5").append($li5);
                $li5= $("<li ></li>").text("低温："+weather.data.forecast[4].low);
                $("#ul5").append($li5);
                $li5= $("<li ></li>").text("风向："+weather.data.forecast[4].fengxiang);
                $("#ul5").append($li5);
                xx=weather.data.forecast[4].fengli;
                y=xx.split("[")[2].split("]")[0];
                $li5= $("<li ></li>").text("风力："+y);
                $("#ul5").append($li5);
                $("#d25").css({
                    background:"url(/img/"+weather.data.forecast[4].type+".jpg)"
                })

            }




        })
    }

</script>
</body>
</html>